<html xmlns="http://www.w3.org/TR/REC-html40" xmlns:chiron="http://cixar.com/javascript">
    <head>
        <script src="../modules.js?chironscript.js"></script>
        <link rel="stylesheet" href="../widget.css" type="text/css"/>
    </head>
    <body chiron:context>
        <div id="progress" class="progress" chiron:require="widget/progress.js#Progress"></div>
        <p>
            <a class="button" id="playButton" href="#">play</a>
            <a class="button" id="stopButton" href="#">stop</a>
            <a class="button" id="toggleButton" href="#">toggle</a>
        </p>
        <script language="chironscript">
            with (require('http.js')) {
            with (require('transitions.js')) {
            with (require('widget/progress.js')) {
            with (require('browser.js')) {
            var sound = require('sound.js');
            sound.ready.observe(function () {

            var motifUrl = resolve(
                '../../tale/music/pasillas/1-4-dysia-motif.mp3',
                moduleUrl
            );

            var playing;
                playing = sound.play(motifUrl);
                progress.observe(playing);
            playButton.getElement().onclick = function () {
                playing = sound.play(motifUrl);
                progress.observe(playing);
            };
            stopButton.getElement().onclick = function () {
                playing.stop();
            };
            toggleButton.getElement().onclick = function () {
                playing.toggle();
            };
            var progressElement = progress.getElement();
            progressElement.onclick = function (event) {
                playing.setProgress((event.clientX - getPosition(progressElement).x) / progressElement.clientWidth)
            };

            })}}}}
        </script>
    </body>
</html>
